<template>
    <a-form :form="form" layout="inline">
        <div>
            <rx-grid ref="table"
                     :dataSource="headerFields"
                     :allowRowSelect="false"
                     :multiSelect="true"
                     :showPage="false"
                     :columns="headerColumns"
                     :heightauto="true"
            >

                <span slot="name" slot-scope="{text,record,index,blur}">
                  {{ text }}
                </span>
                <span slot="edit" slot-scope="{text,record,index}">
                   <a-checkbox :checked="filterPermissionEdit(record.read,'read')"
                               @click.stop="compile(record,index,'read')"></a-checkbox>
                   <my-icon v-if="!filterPermissionEdit(record.read,'read')" @click="editRecord(record,index,'read')"
                            style="margin-left: 5px" type="iconsetup"></my-icon>
                   <a-tag v-if="record.read !='none' && record.read !='everyone'" style="margin-left: 10px" color="green">
                       {{ i18n('list.alreadySet', '已设置') }}
                   </a-tag>
              </span>
            </rx-grid>
        </div>

    </a-form>
</template>
<script>
import {BaseForm, RxLayout, RxGrid, RxCodemirror} from "@lowcode/jpaas-common-lib";

import DialogBox from "@/assets/js/DialogBox";


export default {
    name: 'FormPermissionUserTabList',
    mixins: [BaseForm],
    props: {
        mainData: {
            type: Array,
            default: []
        }
    },
    components: {
        RxLayout,
        RxGrid,
        RxCodemirror,
    },
    computed: {
        language() {
            return window.localStorage.getItem('language') || 'zh-CN';
        },
    },
    data() {
        return {
            editShow: true,
            editIndex: 0,
            selectAllType: "",
            selectOneType: "",
            changeValue: {},
            activeKey: "columnConf",
            isAllowDataGrant: false,
            isLeftTree: 'NO',
            expandedRowKeys: [],
            fieldDatas: [],
            headerFields: [],
            headerColumns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    width: 50,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {
                    title: this.i18n('form.name', '字段名称'),
                    dataIndex: 'name',
                    width: 200,
                    allowCellEdit: false,
                    scopedSlots: {customRender: 'name'}
                },
                {
                    title: this.i18n('list.show', '显示'),
                    slots: {title: 'filterEdit'},
                    dataIndex: 'edit',
                    allowCellEdit: false,
                    scopedSlots: {customRender: 'edit'}
                }]
        }
    },
    created() {
        this.headerFields = this.mainData;
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formPermiss", key);
        },
        //  全选编辑
        filterEdit(name) {
            var show = false;
            this.editShow = !this.editShow;
            //全部有权限
            var permission = {};
            if (this.editShow) {
                permission[name] = 'everyone';
                permission[name + '_name'] = this.i18n('list.everyone', '所有人');
            } else {
                permission[name] = 'none';
                permission[name + '_name'] = this.i18n('list.none', '无权限');
            }
            this.headerFields = this.headerFields.map(res => {
                res[name] = permission[name];
                res[name + '_name'] = permission[name + '_name'];
                return res
            })
            this.$refs.table.loadData();
        },
        filterPermissionEdit(value, name) {
            if (value == 'everyone') {
                return true
            } else {
                if (name == 'edit') {
                    this.editShow = false;
                }
                return false
            }
        },
        compile(record, index, type) {
            if (record[type] == 'everyone') {
                record[type] = 'none';
                record[type + '_name'] = this.i18n('list.none', '无权限')
            } else {
                record[type] = 'everyone';
                record[type + '_name'] = this.i18n('list.everyone', '所有人')
            }
            var show = true;
            this.headerFields.map(res => {
                if (res[type] == 'none') {
                    show = false
                }
            })
            this[type + 'Show'] = show;
        },
        editRecord(record, index, type) {
            this.selectOneType = type;
            DialogBox.openPermissionUser(this, record[type], function (self_, data) {
                self_.setChangeValues(data, record, self_.selectOneType);
            });
        },
        setAttrsValue(type) {
            this.selectAllType = type;
            var selectDatas = this.$refs.table.getSelectedRows();
            if (!selectDatas || selectDatas.length == 0) {
                this.$message.info(this.i18n('msg.setAttrMsg', '请先选择需要设置的列数据，再进行操作！'));
                return;
            }
            var self_ = this;
            DialogBox.openPermissionUser(this, selectDatas[0][type], function (self_, data) {
                var selectDatas = self_.$refs.table.getSelectedRows();
                for (var i = 0; i < selectDatas.length; i++) {
                    var row = selectDatas[i];
                    self_.setChangeValues(data, row, self_.selectAllType);
                }
            });
        },
        setChangeValues(data, row, type) {
            var typeName = type + "_name";
            var rowData = {};
            rowData[type] = data.value;
            rowData[typeName] = data.label;
            this.$refs.table.updateRow(row, rowData);
        },
        getMainData() {
            var returnObj = {};
            var dataList = this.$refs.table.getData();
            if (!dataList || dataList.length == 0) {
                return returnObj;
            }
            for (var i = 0; i < dataList.length; i++) {
                var dataObj = dataList[i];
                returnObj[dataObj.key] = dataObj;
            }
            return returnObj;
        }
    },
    watch: {
        "mainData": function (val, oldVal) {
            this.headerFields = this.mainData;
        }
    }
}
</script>

<style scoped>
.ant-btn-primary {
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 0;
}

.btn-inline-box {
    margin: 10px 20px 6px 20px;
}
</style>